<template>
    <div ref="satellitePieChartRef" style="width: 100px;height: 150px;"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'SatellitePieChart',
})
</script>
<script setup lang="ts">
import * as echarts from "echarts";
import 'echarts-liquidfill';
const satellitePieChartRef: any = ref(null)
const props = defineProps<{
    title: string,
    seriesData: any
}>()
const {title,seriesData} = toRefs(props)
const setOptions = (title: any, seriesData: any) => {
    // 根据数值范围确定颜色类型
    const value = seriesData[0];
    const isHighValue = value > 0.9;
    const isMediumValue = value > 0.8 && value <= 0.9;
    const isLowValue = value <= 0.8;
    
    // 红色系（大于90%）
    const highColors = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#422a2a' },
            { offset: 1, color: '#2a1a1a' }
        ]), 
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#7a3535' },
            { offset: 1, color: '#422a2a' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ff6b6b' },  // 更亮的红色
            { offset: 1, color: '#ed5555' }   // 原来的红色作为终点
        ]),
    ]
    
    // 黄色系（80%-90%）
    const mediumColors = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#3d3a20' },
            { offset: 1, color: '#2a2815' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#7a7435' },
            { offset: 1, color: '#42402a' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ffd86b' },  // 亮黄色
            { offset: 1, color: '#e6c355' }   // 深黄色
        ]),
    ]
    
    // 蓝色系（小于80%）
    const lowColors = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1156a9' },
            { offset: 1, color: '#0a3671' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1389d7' },
            { offset: 1, color: '#1156a9' }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#42b9fa' },
            { offset: 1, color: '#1156a9' }
        ]),     
    ]
    
    // 根据值范围选择颜色和边框颜色
    let colors, borderColor, backgroundColor;
    
    if (isHighValue) {
        colors = highColors;
        borderColor = '#ed6b6b';
        backgroundColor = '#ed6b6b';
    } else if (isMediumValue) {
        colors = mediumColors;
        borderColor = '#e6c355';
        backgroundColor = '#3d3a20';
    } else {
        colors = lowColors;
        borderColor = '#1594e9';
        backgroundColor = '#1a2a4d';
    }
    
    return {
        series: [
            {
                name: title,
                type: 'liquidFill',
                data: seriesData, //水波分层对应数据
                radius: '100%',
                shape: 'circle',
                center: ['50%', '50%'],
                backgroundStyle: {
                    borderColor: borderColor,
                    borderWidth: 2,
                    color: backgroundColor
                },
                color: colors,
                outline: {
                    show: false
                },
                label: {
                    show: true,
                    formatter:(p:any)=>{
                        const percentage = (p.value * 100).toFixed(0)
                        return `{a|${p.seriesName}}\n{b|${percentage}%}`;
                    },
                    rich:{
                        a:{
                            fontSize:12,
                            color:'#fff',  
                        }, 
                        b:{
                            fontSize:20,
                            color:'#fff',
                        }
                    },
                    position: ['50%', '50%'],
                }
            },
        ],
    }
}
let pieChart: any
const initPieChart = () => {
    if (!pieChart) {
        pieChart = echarts.init(satellitePieChartRef.value);
    }
   window.addEventListener('resize',()=>{
    pieChart.resize()
   })
}
watch(()=>seriesData.value,()=>{
    initPieChart()
    pieChart.setOption(setOptions(title.value,seriesData.value))
},{
    deep:true
})
</script>

<style lang="scss" scoped></style>
